<template>
	<!-- 页面整体容器 -->
	<div class="land-page">
		<!-- 种类选择部分 -->
		<div class="categories">
			<!-- 使用 v-for 循环渲染每一个分类项，绑定唯一的 :key -->
			<div class="category" v-for="category in categories" :key="category" @click="selectCategory(category)">
				{{ category.name }}
			</div>
		</div>
		<!-- 搜索 -->
		<view class="search-container">
			<u-search v-model="searchValue" :shape="'square'" :bg-color="'#dedede'" placeholder="请输入商品名称"
				@search="onSearch" :border-radius="'16rpx'" />
		</view>

		<view class="container">
			<!-- 组件 -->
			<Myland v-for="item in shareList" :key="item.landId" :land="item"></Myland>
		</view>
		<!-- 下拉加载提示 -->
		<view v-if="isLoading" class="loading">加载中...</view>
		<view v-if="noMore" class="no-more">没有更多数据了</view>
		<bottomVue></bottomVue>
	</div>
</template>

<script>
import {
  ref,
  computed,
  onMounted,
  onUnmounted
} from 'vue';
import {
  myland
} from '@/common/api.js';
// 导入组件
import Myland from '@/component/Myland.vue'; // 这里的路径根据您的项目结构进行修改
// 底边导航栏组件
import bottomVue from '@/component/bottom.vue';
// 控制弹窗显示状态
import { useUserStore } from '@/stores/user.js';

export default {
  components: {
  	Myland,
  	bottomVue
  },
  setup() {
    // pinia中的数据
    const userStore = useUserStore();

    // 定义分页响应式变量
    const page = ref({
      size: 2,
      currentPage: 1
    });

    const num = ref(0); //获取到状态
    // 分类数据
    const categories = ref([
      { id: 0, name: "全部" },
      { id: 1, name: "蔬菜区" },
      { id: 2, name: "有机区" },
      { id: 3, name: "无机区" },
      { id: 4, name: "混合区" }
    ]);

    const isLoading = ref(false); // 标志位，用来控制是否继续加载更多
    const noMore = ref(false); // 是否还有更多数据

    // 土地数据
    const shareList = ref([]);

    // 排序选项
    const sortOptions = ref(["销量优先", "距离优先", "人气优先"]);
    const selectedSortOption = ref(sortOptions.value[0]); // 默认选择第一个排序选项

    // 搜索框内容
    const searchValue = ref("");

    // 定义函数 selectCategory，处理用户选择某个分类的逻辑
    const selectCategory = (category) => {
      console.log(`Selected category: ${category.name}, ID: ${category.id}`);
      num.value = category.id;
      shareList.value = [];
      page.value.currentPage = 1; // 重置为第一页
      noMore.value = false; // 重置是否还有更多数据
      const params = {
        size: page.value.size,
        currentPage: page.value.currentPage,
        type: category.id,
        userId: userStore.userId,
      };
      mylandselect(params);
    };

    // 定义函数 selectSortOption，处理用户选择某个排序选项的逻辑
    const selectSortOption = (option) => {
      console.log(`选择了排序方式: ${option}`);
      selectedSortOption.value = option; // 更新当前选中的排序方式
    };

    // 定义函数 handleSearch，处理用户在搜索框中输入的逻辑
    const handleSearch = () => {
      console.log(`当前搜索关键词: ${searchValue.value}`);
      // 在此处可以添加搜索逻辑，比如过滤商品列表等
    };

    // 搜索方法
    const onSearch = (value) => {
      console.log('搜索内容:', value);
      shareList.value = [];
      page.value.currentPage = 1; // 重置为第一页
      noMore.value = false; // 重置是否还有更多数据
      const params = {
        name: value,
        size: page.value.size,
        currentPage: page.value.currentPage,
        userId: userStore.userId
      };
      mylandselect(params);
    };

    // 数据请求函数
    const mylandselect = async (params) => {
      if (isLoading.value || noMore.value) return; // 防止重复请求或没有更多数据

      isLoading.value = true;
      try {
        const res = await myland(params);
        console.log(res.data);

        if (res.code == 200) {
          shareList.value = [...shareList.value, ...res.data];

          // 判断返回的数据长度，如果小于当前页大小，则不再继续查询
          if (res.data.length < page.value.size) {
            console.log('没有更多数据了');
            noMore.value = true; // 停止继续加载更多数据
          }
        }
      } catch (error) {
        console.error('请求失败:', error);
      } finally {
        isLoading.value = false;
      }
    };

    // 挂载和卸载生命周期钩子
    onMounted(() => {
      // 初始加载数据
      const params = {
        size: page.value.size,
        currentPage: page.value.currentPage,
        userId: userStore.userId
      };
      mylandselect(params);
    });

    onUnmounted(() => {
      // 页面卸载时可以在这里执行一些清理操作
    });

    // 微信小程序中的上拉加载更多处理函数
    const onReachBottom = () => {
      console.log("触底事件触发");
      if (!noMore.value) {
        page.value.currentPage += 1; // 增加页码
        const params = {
          size: page.value.size,
          currentPage: page.value.currentPage,
          userId: userStore.userId
        };
        mylandselect(params); // 加载更多数据
      }
    };

    return {
      page,
      shareList,
      isLoading,
      noMore,
      searchValue,
      selectedSortOption,
      sortOptions,
      categories,
      selectCategory,
      selectSortOption,
      handleSearch,
      onSearch,
      onReachBottom
    };
  },
  // 注册小程序的生命周期函数
  onReachBottom() {
      this.onReachBottom();
  },
  onPullDownRefresh() {
      this.onPullDownRefresh();
  }
};
</script>


<style scoped>
	.container {
		margin-top: 10px;
		/* width: 94%; */
		/* 设置宽度为页面的94% */
		margin: 0 auto;
		/* 水平居中 */
	}
	.loading,
	.no-more {
		text-align: center;
		padding: 16px;
	}
	.search-container {
		margin-top: 10px;
		width: 105%;
		padding-left: 16px;
	}

	/* 页面整体样式 */
	.land-page {
		font-family: Arial, sans-serif;
	}

	/* 搜索框部分样式 */
	.search-bar {
		display: flex;
		padding: 10px;
		background-color: #f0f0f0;
	}

	.search-bar input {
		flex: 1;
		padding: 8px;
		font-size: 16px;
		border: 1px solid #ddd;
		border-radius: 4px;
	}

	/* 分类部分样式 */
	.categories {
		display: flex;
		background-color: #00C853;
		padding: 10px;
		overflow-x: auto;
		/* 当分类项过多时，允许横向滚动 */
	}

	.category {
		margin-right: 20px;
		font-size: 16px;
		color: white;
		white-space: nowrap;
		cursor: pointer;
		/* 鼠标悬停时显示为可点击 */
	}

	/* 排序选项部分样式 */
	.sort-options {
		display: flex;
		background-color: #ffffff;
		padding: 10px;
	}

	.sort-option {
		margin-right: 15px;
		font-size: 14px;
		cursor: pointer;
		font-weight: bold;
		color: #000000;
	}

	/* 激活的排序选项样式 */
	.sort-option.active {
		color: #00a84f;
		font-weight: bold;
	}
</style>